<template>
  <p>侦听器</p>
  <p>{{ message }}</p>
  <button @click="clickHandle">修改数据</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  }
  , methods: {
    clickHandle() {
      this.message = 'Wrold'
    }
  }
  , watch: {
    // newValue 改变之后的数据
    // oldValue 改变之前的数据
    // 函数名 必须与侦听的数据对象保持一致
    message(newValue, oldValue) {
      // 数据发生变化 自动执行函数
      console.log(newValue, oldValue)

    }
  }
}
</script>